<template>
  <div>
    <div class="bindBankCard">
      <input type="file" style="display: none" ref="input" accept="image/*" @change="handleChange" />
      <van-nav-bar title="绑定银行卡" left-arrow @click-left="onClickLeft">
        <template #left>
          <van-icon name="arrow-left" style="color: #000; font-size: 24px" />
        </template>
      </van-nav-bar>
      <div class="bindBankCard_container">
        <div class="figure_box">
          <img :src="dataSrc || bankCardFront" alt="银行卡正面" class="backgroundUrl" />
          <div v-if="dataSrc">
            <img :src="commonIconClose" alt="" @click="closeIcon" />
          </div>
          <div v-else>
            <div class="uploadBankCard">
              <img :src="myIconCamera" alt="" @click="$refs.input?.click()" />
              <div>点击拍摄/上传银行卡正面</div>
            </div>
          </div>
        </div>
        <button class="btn" @click="nextbtn">下一步</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import bankCardFront from '../../assets/images/image/hdpi/bank_card_front.png';
import myIconCamera from '../../assets/images/icon/common resource/hdpi/my_icon_camera_n.png';
import commonIconClose from '../../assets/images/icon/common resource/hdpi/common_icon_close_n.png';
import { useRouter } from 'vue-router';

const dataSrc = ref<string>(''); // 存储上传的图片 URL
const input = ref<HTMLInputElement | null>(null); // 引用文件输入元素
const router=useRouter();
// 下一步按钮的处理
const nextbtn = () => {
  localStorage.setItem('dataSrc', JSON.stringify(dataSrc.value));
  router.push("/checkBank")
};

// 关闭图标的处理
const closeIcon = () => {
  dataSrc.value = ''; // 清空数据源以重新上传
};

// 返回上一页的处理
const onClickLeft = () => {
  history.back();
};

// 处理文件选择变化
const handleChange = (event: Event) => {
  const target = event.target as HTMLInputElement;
  if (target.files && target.files.length > 0) {
    const file = target.files[0]; // 获取选择的文件
    dataSrc.value = URL.createObjectURL(file); // 创建一个 URL 用于预览
    localStorage.setItem("dataSrc",dataSrc.value)
  }
};
</script>

<style>
@import './binding.scss';

</style>